<template>
  <div class="basket-item-list">
    <ul>
      <li
        v-for="d in list.filter((i) => !i.done)"
        :key="d.name"
        @click="$emit('toggle', d.name)"
        :class="{ done: d.done }"
      >
        <div></div>
        <p>{{ d.name }}</p>
        <p>{{ d.info }}</p>
      </li>
    </ul>
    <!-- <button v-if="doneList.length">已完成{{doneList.length}}</button> -->
    <!-- <ul v-if="open">
        <li
          v-for="(d) in doneList"
          :key="d.name"
          @click="$emit('toggle', d.name)"
          :class="{'done': d.done}"
        >
          <div></div>
          <p>{{d.name}}</p>
          <p>{{d.info}}</p>
        </li>
      </ul> -->

    <van-collapse v-model="activeNames" v-if="doneList.length">
      <van-collapse-item title="标题1" name="1">
        <ul v-if="open">
          <li
            v-for="d in doneList"
            :key="d.name"
            @click="$emit('toggle', d.name)"
            :class="{ done: d.done }"
          >
            <div></div>
            <p>{{ d.name }}</p>
            <p>{{ d.info }}</p>
          </li>
        </ul>
      </van-collapse-item>
    </van-collapse>

  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      activeNames: [],
      open: true,
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
  },
  computed: {
    doneList() {
      return this.list.filter((i) => i.done);
    },
  },
};
</script>

<style lang="sass">
.basket-item-list
  li
    display: flex
    align-items: center
    height: 80px
    background: #fff
    border-radius: 3px
    margin: 10px 0
    &.done
      div
        border-color: red
        background: red
      p
        color: gray
        text-decoration: line-through
    div
      width: 25px
      height: 25px
      border: 1px solid #666
      border-radius: 50px
      background: #f9f9f9
      margin-left: 20px
    p
      flex: 1
      margin-right: 20px
</style>
